<template>
  <el-drawer
    title="选择素材"
    size="60%"
    :visible.sync="editFromStroeDrawer"
    :modal-append-to-body="false"
    :wrapperClosable="false"
    :modal="false"
    :with-header="false"
  >
    <cs-drawer-container>
      <div class="creative-drawer-box">
        <el-form :inline="true" :model="creativeQueryForm" class="demo-form-inline">
          <el-form-item label="短ID">
            <el-input size="mini" v-model="creativeQueryForm.stringShortId" placeholder="请输入短ID"></el-input>
          </el-form-item>
          <el-form-item label="本地文件名">
            <el-input size="mini" v-model="creativeQueryForm.localFilename" placeholder="请输入本地文件名"></el-input>
          </el-form-item>
          <el-form-item label="素材名称">
            <el-input size="mini" v-model="creativeQueryForm.name" placeholder="请输入素材名称"></el-input>
          </el-form-item>
          <el-form-item label="上传时间">
            <el-date-picker
              size="mini"
              v-model="creativeQueryForm.date"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleChangeCreativeDate">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="素材尺寸">
            <el-select v-model="creativeQueryForm.sizeType" clearable placeholder="请选择素材尺寸" size="mini">
              <el-option
                v-for="item in sizeType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="需求名称">
            <el-input size="mini" v-model="creativeQueryForm.requestName" placeholder="请输入需求名称"></el-input>
          </el-form-item>
          <el-form-item label="设计师">
            <el-select v-model="creativeQueryForm.designer" clearable filterable
                       size="mini"
                       placeholder="请选择设计师">
              <el-option
                v-for="item in designersList"
                :key="item.value"
                :label="item.realName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="creativeQueryForm.strStatus" clearable filterable multiple collapse-tags
                       size="mini"
                       placeholder="请选择状态">
              <el-option
                v-for="item in approvalStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" @click="clearEditCreativeQuery">清空</el-button>
            <el-button size="mini" type="primary" @click="()=>{
                this.creativePage.current = 1
                this.getCreativeEditTableData()
              }">查询
            </el-button>
          </el-form-item>
        </el-form>
        <div class="curd-table">
          <div class="table-body">
            <el-table
              ref="createTable"
              :data="creativeTableData"
              tooltip-effect="dark"
              height="calc(100vh - 380px)"
              style="width: 100%"
              v-loading="creativeLoading">
              <el-table-column
                label="素材">
                <template v-slot="{row}">
                  <el-tooltip effect="dark" content="点击预览素材" placement="bottom-end">
                    <div style="display: inline-block;cursor: pointer;"
                         :class="row.type == 1?'play-icon':''">
                      <video
                        v-if="row.type == 1"
                        style="width: 100px; height: 100px"
                        :src="row.creativeUrl"
                        @click="handlePreview(row)"
                      >
                      </video>
                      <el-image
                        v-else
                        style="width: 100px; height: 100px"
                        :src="row.creativeUrl"
                        @click="handlePreview(row)"
                        :fit="'cover'">
                      </el-image>
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                prop="shortId"
                label="短ID"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="localFilename"
                label="本地文件名"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="name"
                label="素材名称"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="type"
                :formatter="formatterCreativeType"
                label="类型"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="type"
                label="操作"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleChangeAdCreative(scope.row)">更换
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="bottom-page clearfix">
            <el-pagination
              background
              @size-change="handleEditCreativeSizeChange"
              @current-change="handleEditCreativeCurrentChange"
              :current-page="creativePage.currentPage"
              :page-sizes="[10, 20, 30, 40, 50, 100]"
              :page-size="creativePage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="creativeTotal">
            </el-pagination>
          </div>
        </div>
      </div>
      <creative-card-preview v-model="assetPreview" :media-preview="previewCreative">
      </creative-card-preview>
      <el-button slot="bottom" size="mini" @click="editFromStroeDrawer=false">取消</el-button>
    </cs-drawer-container>
  </el-drawer>
</template>

<script>
import _ from "lodash";
import {offerCreativePage} from "@/api/campaign-management/campaign-management";
import {getAllUser} from "@/api/user";
import CreativeCardPreview from "@/components/CreativeCardPreview/CreativeCardPreview";
import {mapState} from "vuex";
import CsDrawerContainer from "@/components/CsDrawerContainer/CsDrawerContainer";

export default {
  name: "CreativeDrawer",
  components: {
    CreativeCardPreview,
    CsDrawerContainer
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    ...mapState({
      offerId: state => state.user.offer,
    }),
    editFromStroeDrawer: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val || false)
      }
    }
  },
  data () {
    return {
      creativeTableData: [],
      creativeLoading: false,
      // 素材页码
      creativePage: {
        current: 1,
        size: 10
      },
      creativeTotal: 0,
      creativeQueryForm: {
        stringShortId: '',
        localFilename: '',
        name: '',
        type: '',
        date: '',
        beginDate: null,
        endDate: null,
        sizeType: '',
        requestName: '',
        strStatus: [1, 2],
        designer: ''
      },
      // 素材搜索对象
      sizeType: [
        {label: "横幅", value: 'H'},
        {label: "竖幅", value: 'V'},
        {label: "方幅", value: 'S'},
      ],
      designersList: [],
      assetPreview: false,
      previewCreative: null,
      approvalStatusList: [
        {label: "等待提交", value: 0},
        {label: "等待审核", value: 1},
        {label: "审核通过", value: 2},
        {label: "审核拒绝", value: 3},
        {label: "禁用", value: 4},
      ],
    }
  },
  async created() {
    await getAllUser({statusList: '0,1,2', isAll: true}).then((res) => {
      this.designersList = res.data.data;
    });
    await this.getCreativeEditTableData()
  },
  methods: {
    handleEditCreativeSizeChange(val) {
      this.creativePage.size = val
      this.creativePage.current = 1
      this.getCreativeEditTableData()
    },
    handleEditCreativeCurrentChange(val) {
      this.creativePage.current = val
      this.getCreativeEditTableData()
    },
    handleChangeAdCreative(row) {
      this.$emit('get-creative',row)
      this.editFromStroeDrawer = false
    },
    async getCreativeEditTableData() {
      this.creativeLoading = true
      const creativeQueryForm = _.cloneDeep(this.creativeQueryForm)
      creativeQueryForm.strStatus = creativeQueryForm.strStatus.join(',')
      console.log(creativeQueryForm)
      const {data: res} = await offerCreativePage(
        {
          offerId: this.offerId,
          platform: 'tiktok',
          ...this.creativePage,
          ...creativeQueryForm
        }
      ).finally(() => {
        this.creativeLoading = false
      })
      this.creativeTableData = res.data.records
      this.creativeTotal = res.data.total
    },
    handleChangeCreativeDate(val) {
      if (val !== null) {
        this.creativeQueryForm.beginDate = val[0]
        this.creativeQueryForm.endDate = val[0]
      } else {
        this.creativeQueryForm.beginDate = null
        this.creativeQueryForm.endDate = null
      }
    },
    clearEditCreativeQuery() {
      this.creativeQueryForm = {
        shortId: '',
        localFilename: '',
        name: '',
        date: '',
        beginDate: null,
        endDate: null,
        sizeType: '',
        requestName: '',
        strStatus: [],
        designer: ''
      }
      this.getCreativeEditTableData()
    },
    handlePreview(row) {
      this.previewCreative = _.cloneDeep(row)
      this.assetPreview = true
    },
    // 格式化素材类型
    formatterCreativeType(row, column, cellValue, index) {
      if (cellValue == 0) {
        return '图片'
      } else {
        return '视频'
      }
    },
  }
}
</script>

<style scoped lang="scss">
.creative-drawer-box {
  padding: 0 15px;

  .demo-form-inline {
    .el-select, .el-input {
      width: 150px;
    }
  }

  .bottom-page {
    margin-top: 15px;

    .el-pagination {
      float: right;
    }
  }
}
</style>
